/**
 * Copyright (c) 2018-present, Chen Guodong
 * All rights reserved.
 *
 * @flow
 */


<template>
  <section class="content">
    <Header title="支付订单">
      <div slot="left" @click="goBack" style="width: 100%;height: 100%;text-align: center;">
        <i class="iconfont icon-arrow-left" style="font-size: 22px"></i>
      </div>
    </Header>
    <div class="main">
      <ul>
        <li>
          <p class="header">
            <span class="num">订单编号: {{data.orderId}}</span>
            <span class="time">{{data.createTime}}</span>
          </p>
          <div class="top">
            <div class="left">
              <img :src="data.litpic" alt="test">
            </div>
            <div class="right">
              <p class="title">{{data.packageName}}</p>
              <div class="info_box">
                <b class="type">¥{{data.actual}}</b>
              </div>
            </div>
          </div>
        </li>
      </ul>
      <div class="buy_box">
        <div class="zixun_box">
          应付金额:
          <span style="color: #fe4842;padding-left: 10px;">¥{{data.amount}}</span>
        </div>
        <div class="buy" @click="goWechartPay">立即支付</div>
      </div>
    </div>
  </section>
</template>

<script>
import Header from "../../components/Header/Header";
import { reqOrderDetail, reqwxpay, reqWechartLogin } from "../../api/index.js";
import { getUrlAllParams, decodeUnicode, isWeiXin } from "../../util/unit.js";
export default {
  data() {
    return {
      data: {}
    };
  },
  mounted() {
    this.getOrderDetail();
  },
  methods: {
    goBack() {
      if (window.history.length <= 1) {
        this.$router.push({ path: "/" });
        return false;
      } else {
        this.$router.go(-1);
      }
    },
    async getOrderDetail() {
      let orderId = this.$router.history.current.query.orderId;
      let result = await reqOrderDetail({
        orderId: orderId
      });
      if (result.code === 1) {
        this.data = result.data;
      } else {
        this.$vux.toast.show(`获取订单信息失败:${result.msg}`);
      }
    },
    goWechartPay() {
      // if (isWeiXin()) {
        this.$router.push({
          path: "/wechartpay",
          query: { orderId: this.$router.history.current.query.orderId }
        });
      // }else{
      //   this.$vux.toast.show(`请在微信中进行支付!`);
      // }
    }
  },
  components: {
    Header
  }
};
</script>

<style lang='less' scoped>
@import "../../util/theme.less";
.content {
  .be-full();
  .main {
    width: 100%;
    height: calc(~"100% - 46px");
    ul {
      box-sizing: border-box;
      width: 100%;
      li {
        padding: 0 10px;
        box-sizing: border-box;
        background: @white;
        margin-bottom: 15px;
        .top {
          border-bottom: 1px solid @border-base;
          .mix-flex-center();
          height: 90px;
          position: relative;
          box-sizing: border-box;
          padding: 10px 0;
          .left {
            height: 100%;
            flex: 3;

            img {
              width: 100%;
              height: 100%;
              border-radius: 5px;
              overflow: hidden;
            }
          }
          .right {
            width: 100%;
            height: 100%;
            flex: 7;
            padding-left: 10px;
            position: relative;
            .title {
            }
            .info_box {
              position: absolute;
              bottom: 0;
              width: 100%;
              .type {
                color: red;
              }
              .status {
                position: absolute;
                right: 10px;
                top: 0;
                font-size: 10px;
                border: 1px solid @primary;
                color: @primary;
                padding: 0 3px;
                border-radius: 3px;
              }
            }
          }
        }
        .header {
          line-height: 30px;
          font-size: 12px;
          text-align: left;
          color: @font-secondary;
          .mix-flex-center();
          span {
            flex: 1;
            white-space: nowrap;
          }
          .num {
          }
          .time {
            text-align: right;
            margin-right: 6px;
          }
        }
      }
    }
  }
}

// 购买
.buy_box {
  position: fixed;
  height: 50px;
  width: 100%;
  left: 0;
  bottom: 0;
  background: #fff;
  .mix-flex-center();
  font-size: 16px;
  .zixun_box {
    flex: 6;
    .mix-flex-center();
    color: @red;
    img {
      width: 26px;
      height: 26px;
    }
  }
  .buy {
    height: 100%;
    flex: 4;
    .mix-flex-center();
    font-size: 16px;
    color: @white;
    background: @red;
    b {
      padding: 0 6px;
    }
  }
}
</style>
